<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    div{
        background: aliceblue;
    }

    table {
        border-collapse: collapse;
    }
    table, th, td {
        border: 1px solid black;
    }
</style>
<title></title>
</head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<body>
<div id="test">
    <select id='selectone' onchange='getlist(this)'>
    </select>
    <table id='tableone' style="border-spacing: 50px">
    </table>
</div>
<script type="text/javascript">

        //var urlip ="127.0.0.1:8080"
        var urlip ="10.170.66.24:18080"

        function getlist(target){
            if(target.value == 'ALL'){
                $(`#tableone>tr`).css("display","table-row");
                return;
            }
            $(`#tableone>tr`).not(`.${target.value}`).css("display","none");
            $(`#tableone>tr.${target.value}`).css("display","table-row");
        }

        function execjob(target){
            // console.log(target.target.parentNode.parentNode.childNodes[1].innerHTML)
            // console.log(target.target.parentNode.parentNode.childNodes[3].innerText)

            $.ajax({
                method:"get",
                //http://127.0.0.1:8080/v1/run-job?taskName=TestJob&group=test
                url:"http://"+urlip+"/v1/run-job?taskName="+target.target.parentNode.parentNode.childNodes[1].innerHTML+"&group="+target.target.parentNode.parentNode.childNodes[3].innerText,
                //url:"http://127.0.0.1:8080/ems/get-emsList",
                data:{},
                dataType: "json",
                headers: {
                    'asd':'qqq'
                },
                success : function(data) {
                    console.log(111111);
                    location = `jobList.html`;
                },
                error : function(msg) {
                }
            });

        }

        $(function(){
            $.ajax({
                method:"get",
                //url:"http://app-monitor.com:10133/ems/get-emsList",
                url:"http://"+urlip+"/v1/getAllJob",
                //url:"http://127.0.0.1:8080/ems/get-emsList",
                data:{},
                dataType: "json",

                success: function(data){
                    $("#selectone").append(`<option value="ALL" >ALL</option>`)



                    $.each(data.data,function (i,items){
                        if($(`#selectone>option[value=${items.jobGroup}]`).length == 0){//则包含该元素
                            $("#selectone").append(`<option value="${items.jobGroup}" >${items.jobGroup}</option>`)
                        }


                        $("#tableone").append(`
                            <tr class=${items.jobGroup}>
                                <td bgcolor=#ffa600 >${items.jobName}</td>
                                <td bgcolor=#ffa600>${items.jobGroup}</td>
                                <td bgcolor=#ffa600>${items.cronExpression}</td>
                                <td><button onclick='execjob(event)'>execJob</button></td>
                            </tr>
                        `)
                    })


                }

            });
        })


</script>
</body>
</html>


